<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 10. 利用事件委托的方法，给一个无序列表的列表项添加点击更改背景色事件。简单说明思路。 -->
    <div id="box">
        <ul id="list">
            <li>香蕉</li>
            <li>苹果</li>
            <li>芒果</li>
            <li>菠萝</li>
            <li>橘子</li>
            <li>柚子</li>
        </ul>
    </div>
    <script>
        // 事件委托方式：将自己的公共类型的事件，委托给他们的父级，在父级添加事件，但是要在父级中找到真正触发事件的元素
        // 获取元素
        var list = document.getElementById("list");
        // 真正的事件源是li，所以这里找到这些lis
        var lis = list.children;
        // 给父级添加事件
        list.onclick = function (e) {//不要忘记这里的参数 e
            // 内部找到真正触发事件的事件源
            // 借用事件函数内部的参数 e
            // 只要触发事件，函数内部都可以得到一个事件对象，对象中存储了关于事件的一系列参数
            console.log(e);
            // e.target 属性记录的就是真正触发事件的事件源
            // 排他思想
            for (var i = 0 ; i < lis.length; i++) {
                lis[i].style.backgroundColor = "";//这里不能用this
            }
            // e对象操作背景
            e.target.style.backgroundColor = "skyblue";
        };
    </script>
</body>
</html>